<template>
   <el-card class="box-card">
    <template #header>

      <div class="card-header">
    
       <p>课程列表</p>
      </div>
    </template>
    <div class="aaa">
    <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="date" label="序号" width="100" />
    <el-table-column prop="name" label="课程名称" width="180" />
    <el-table-column prop="state" label="创建时间" width="200" />
 
    <el-table-column prop="citys" label="可见状态" width="100">
      <template v-slot="scope">
      <el-switch 
      v-model="scope.row.citys" 
      @change="changeSwitch(scope.row)"
      />
      </template>
      </el-table-column>
      
    <el-table-column prop="address" label="操作" >
      <template #default="scope">
    <el-button @click="edit(scope.row)"><el-icon><EditPen /></el-icon></el-button>
    <el-button @click="ziyuan(scope.row)"><el-icon><Files /></el-icon></el-button>
    <el-button @click="ziyuanbianpai(scope.row)"><el-icon><Monitor /></el-icon></el-button>
    <el-button @click="kaike(scope.row)"><el-icon><School /></el-icon></el-button>
      </template>
      </el-table-column>

    </el-table>
    <p v-if="message != ''">正在{{message}}</p >
    </div>
  </el-card>

</template>

<script>

import {School,Files,Monitor,EditPen} from '@element-plus/icons-vue'


export default {
  data(){
    return{
      scope:[{}],
      message:'',
      tableData:[
        {date:1,name:"Java程序设计",state:"2020-12-12",citys:false},
        {date:2,name:"MySQL数据库技术",state:"2021-12-11",citys:true},
        {date:3,name:"Web前端开发基础",state:"2021-12-11",citys:true},
        {date:4,name:"web前端项目开发实战",state:"2021-12-11",citys:true}
      ]
    }
  },
  
    methods:{
      changeSwitch(val){
console.log(val);
if(val.citys==true){
  this.$message.success(val.name + "现在是可以看见的")
} else{
  this.$message.warning(val.name +"现在是不可以看见的")
}
      },
      edit(val){
        this.message =  "编辑"+val.name 
      },
      ziyuan(val){
        this.message= "资源管理"+val.name
      },
      ziyuanbianpai(val){
        this.message="资源编排"+val.name
      },
      kaike(val){
        this.message="开课:"+val.name
      }
      
    },
   components:{
      School,
      Files,
      Monitor,
      EditPen,

      
 },

}

</script>


<style>
p{
  text-align: left;
  font-size: 20px;
}
.aaa{
  text-align: center;
  font-size: 40px;
  height: 300px;
}




</style>
